<template>
  <div class="detail">
    <div class="detail-container">
    	<!--导航路径-->
    	<div class="detail-breadcrumb">
        <v-breadcrumb :breadcrumb="breadcrumb"></v-breadcrumb>
    	</div>
      <!--购买部分-->
      <div class="detail-buy">
        <!--图片轮播-->
        <div class="detail-product-slide">
          <detail-slider :slideImages="slideImages"></detail-slider>
        </div>
        <!--商品操作-->
        <div class="detail-product-buy">
          <!--商品名-->
          <div class="detail-product-title">
            {{ goodsContent.goods_name }}
          </div>
          <!--价格-->
          <div class="detail-product-price">
            <div class="detail-product-label detail-product-label-price">
              {{$t('message.price')}}:
            </div>
            <div class="detail-product-totalPrice float-left">
              {{ $t('message.currencySymbol') }}
              <span>{{ goodsContent.base_price }}</span>
            </div>
          </div>
          <!--赠品-->
          <div class="detail-product-gifts" v-if="giftsExist">
            <div class="detail-product-label detail-product-label-gifts">
              {{$t('message.gifts')}}:
            </div>
            <div class="detail-product-gifts-detail float-left">
              <!--赠品图片-->
              <div class="detail-product-one-gift float-left" v-for="(item, index) in gifts" :key="index">
                <a :href="`/detail/product?goodsId=${item.id}`">
                  <img :src="item.img_url">
                </a>
                <span>×&nbsp;1</span>
              </div>
              <div class="detail-product-gifts-tips detail-product-one-gift-margin-left float-left">({{$t('message.endOfGift')}})</div>
            </div>
          </div>
          <!--颜色和版本选择-->
          <div class="detail-product-color-version">
            <!--颜色-->
            <div class="detail-product-color">
              <div class="detail-product-label">
                {{$t('message.color')}}:
              </div>
              <div class="float-left" style="width: 430px">
                <v-chooser :isReset="resetColor" :selections="colorList" @on-change="onParamChange('color', $event)"></v-chooser>
              </div>
            </div>
            <!--版本-->
            <div class="detail-product-version">
              <div class="detail-product-label">
                {{$t('message.version')}}:
              </div>
              <div class="float-left" style="width: 430px">
                <v-chooser :selections="versionList" @on-change="onVersionChange('version', $event)" @changes="resetColorInfo"></v-chooser>
              </div>
            </div>
          </div>
          <!--该商品不支持分期购买提示-->
          <div class="detail-product-proportion" v-if="goodsContent.base_price <= 200">
            <div style="margin-left: 16px;">
              {{$tc('message.noStateBuy')}}
            </div>
          </div>
          <!--首付比例-->
          <div class="detail-product-proportion" v-if="goodsContent.base_price > 200">
            <div class="detail-product-label detail-product-proportion-label">
              {{$tc('message.downPayment', 1)}}:
            </div>
            <div class="float-left" ref="selectWrap">
              <v-select :selections="proportionList" @on-change="onParamChange('proportion', $event)"></v-select>
            </div>
          </div>
          <!-- 分期 -->
          <div class="detail-product-proportion" v-if="goodsContent.base_price > 200">
            <div class="detail-product-label">
              {{$tc('message.amortization', 0)}}:
            </div>
            <div class="amortization">
              <v-chooser :selections="installmentList" :stages="installmentNum.stages" @on-change="onParamChange('installment', $event)"></v-chooser>
            </div>
          </div>
          <div style="clear:both"></div>
          <!--月供-->
          <div class="detail-product-month" v-if="goodsContent.base_price > 200">
            <div class="detail-product-label">
              {{$tc('message.monthlyPayments')}}:
            </div>
            <div class="detail-product-monthlyPay float-left">
              {{ $t('message.currencySymbol') }}
              <span style="font-size:22px">{{ installmentNum.stage_pay }}</span>
            </div>
          </div>
          <!--提示-->
          <div class="detail-product-tip" v-if="goodsContent.base_price > 200">
            <div class="detail-product-tip-container">
              <i class="icon-triangle"></i>
              {{ installmentText }}，{{$tc('message.downPayment', 2)}}：<span class="detail-product-tip-text">{{ $t('message.currencySymbol')
              }}{{ installmentNum.down_payment }}</span>，<br>
              {{$tc('message.monthlyPayments', 2)}}：<span class="detail-product-tip-text">{{ $t('message.currencySymbol')
              }}{{ installmentNum.stage_pay }}({{$t('message.withHandlingCharge')}}{{ $t('message.currencySymbol') }}{{ installmentNum.stage_price_fee }})</span>
            </div>
          </div>
          <!--购买按钮-->
          <div class="detail-product-btn-group">
            <!--分期购买-->
            <div v-if="goodsContent.base_price > 200">
              <button class="detail-product-btn btn-orange" @mouseenter="isShowTips('isWarmPrompt')" @mouseleave="isHideTips('isWarmPrompt')" @click="installmentBuy" :class='{"disabled": isSoldOut || inStock}'>{{$t('message.payByState')}}</button>
              <div class="warmPrompt" v-if="isWarmPrompt">
                <div class="top-triangle"></div>
                <!--<span ref="tipContent1"></span>-->
                <span v-if="inStock && !isSoldOut">{{ $t('message.stockNoBuyTips') }}</span>
                <span v-if="(isSoldOut && !inStock) || (isSoldOut && inStock)">{{ $t('message.soldOutNoBuyTips') }}</span>
              </div>
            </div>
            <!--全额购买-->
            <div>
              <button class="detail-product-btn btn-white detail-no-right" @mouseenter="isShowTips('isWarmPromptFullBuy')" @mouseleave="isHideTips('isWarmPromptFullBuy')" @click="fullBuy" :class='{"disabled2": isSoldOut || inStock}'>{{$t('message.payAll')}}</button>
              <div class="warmPrompt" v-if="isWarmPromptFullBuy">
                <div class="top-triangle"></div>
                <!--<span ref="tipContent2"></span>-->
                <span v-if="inStock && !isSoldOut">{{ $t('message.stockNoBuyTips') }}</span>
                <span v-if="(isSoldOut && !inStock) || (isSoldOut && inStock)">{{ $t('message.soldOutNoBuyTips') }}</span>
              </div>
            </div>
          </div>
        </div>
				<!--相关推荐-->
      	<div class="detail-product-recommend">
      		<v-sider :products="recommendProduct">{{$t('message.related')}}</v-sider>
      	</div>
      </div>
      <div class="detail-bottom">
      	<!--看了又看-->
      	<div class="detail-look">
      		<v-sider :products="lookProduct">{{$t('message.recommend')}}</v-sider>
      	</div>
      	<!--商品详情和猜你喜欢-->
      	<div class="detail-information-guess">
      		<!--商品详情-->
      		<div class="detail-information">
		        <div class="detail-information-header">
		          <ul>
		            <router-link :to="{path: 'product', query: {goodsId: this.goodsId}}" tag="li" active-class="active">{{$tc('message.detail', 1)}}
		            </router-link>
		            <router-link :to="{path: 'param', query: {goodsId: this.goodsId}}" tag="li"  active-class="active">{{$t('message.packingAndParameters')}}
		            </router-link>
		            <router-link :to="{path: 'aftermarket', query: {goodsId: this.goodsId}}" tag="li" class="detail-no-right"  active-class="active">{{$t('message.aftermarket')}}
		            </router-link>
		          </ul>
		        </div>
		        <div class="detail-information-container">
		          <keep-alive>
		            <router-view :goodsContentItem="this.goodsContentItem"></router-view>
		          </keep-alive>
		        </div>
		      </div>
		      <!--猜你喜欢-->
		      <div class="detail-guess-you-like">
		        <detail-guess :products="products" :num="4"></detail-guess>
		      </div>
      	</div>
      </div>
    </div>
    <!--回到顶部-->
    <v-go-top></v-go-top>
    <!--登录弹出框-->
    <v-dialog v-if="showDialogType === 'login'">
      <div class="detail-login-container">
      	<div class="detail-login-close" @click="closeDialog"></div>
      	<div class="detail-content">
      		<login-item @on-close="closeDialog"></login-item>
      	</div>
      </div>
    </v-dialog>
    <!--身份认证不合格弹出框-->
    <v-dialog v-if="showDialogType === 'identity'">
    	<div class="dialog-tip">
    		<!--<div class="dialog-title">{{$t('message.identityNotAllowed')}}</div>-->
    		<div class="dialog-title">{{ attestationTips }}</div>
	    	<div class="dialog-btn-group">
	    		<button type="button" class="dialog-btn btn-orange" @click="toPersonalIdentity">{{$t('message.gotoAffirm')}}</button>
	    		<button type="button" class="dialog-btn btn-white margin-left" @click="closeDialog">{{$t('message.no')}}</button>
	    	</div>
    	</div>
    </v-dialog>
    <!--个人额度不足弹出框-->
    <v-dialog v-if="showDialogType === 'quota'">
    	<div class="dialog-tip">
    		<div class="dialog-title">{{$t('message.limitNotEnough')}}</div>
	    	<div class="dialog-btn-group">
	    		<button type="button" class="dialog-btn btn-orange" @click="toPersonalQuota">{{$t('message.addLimit')}}</button>
	    		<button type="button" class="dialog-btn btn-white margin-left" @click="closeDialog">{{$t('message.no')}}</button>
	    	</div>
    	</div>
    </v-dialog>
    <!--低于200元不能分期购买弹出框-->
    <v-dialog v-if="showDialogType === 'isLessTwoHundred'">
    	<div class="dialog-tip">
    		<!--<div class="dialog-title">该商品不支持分期购买</div>-->
        <div class="dialog-title">{{$t('message.noStateBuy')}}</div>
        <div class="dialog-btn-group">
	    		<button type="button" class="dialog-btn btn-orange btn-center" @click="closeDialog">{{$t('message.yes')}}</button>
	    	</div>
    	</div>
    </v-dialog>
  </div>
</template>

<script>
  import DetailSlider from '@/components/detail/DetailSlider'
  import VChooser from '@/components/base/VChooser'
  import VSelect from '@/components/base/VSelect'
  import VDialog from '@/components/base/VDialog'
  import VSider from '@/components/base/VSider'
  import DetailGuess from '@/components/detail/DetailGuess'
  import VGoTop from '@/components/base/VGoTop'
  import LoginItem from '@/components/login/LoginItem'
  import VBreadcrumb from '@/components/base/VBreadcrumb'

  export default {
    name: 'Detail',
    metaInfo () {
      return {
        meta: [
//          {
//            name: 'keyword',
//            content: 'ซื้อโทรศัพท์มือถือขายดี,สินค้าขายดี,ช้อปปิ้งออนไลน์,ซื้อiPhoneขายดี'
//          },
          {
            name: 'description',
            content: 'ซื้อ  ' + this.productName + ' ออนไลน์ ผ่อนสินค้าไม่มีค่าบริการ | รวมสินค้าขายดี มีให้เลือกมากมาย โทรศัพท์มือถือ iPhone Samsung Huawei oppo vivo สินค้าแฟชั่นขายดี ซื้อง่ายผ่อนได้ทุกราคา ตรงใจวัยรุ่นไม่ต้องใช้บัตรเครดิตก็ผ่อนได้ ส่งฟรี!! ที่นี่เลย | Thishop'
          }
        ]
      }
    },
    components: {
      DetailSlider,
      VChooser,
      VSelect,
      VDialog,
      VSider,
      DetailGuess,
      VGoTop,
      LoginItem,
      VBreadcrumb
    },
    data () {
      return {
        isShowBtn: false,
        productName: null,
        resetColor: false,
//        defaultStages: 0,
        disabled: false,
        goodsContentItem: '',
        goodsId: this.$route.query.goodsId,
        goodsContent: '',
        installmentNum: {},
        pageInfo: '',
        slideImages: {},
        totalPrice: 1299,
        color: {},
        version: {},
        proportion: {},
        installment: {},
        colorList: [],
        versionList: [],
        recommendProduct: [],
        lookProduct: [],
        showDialogType: '',
        products: [],
        // 当前商品是否赠品
//        isGift: false,
        giftsExist: false, // 当前商品有无赠品,
        gifts: [], // 赠品列表
        breadcrumb: [],
        inStock: false, // 是否有货
        isWarmPrompt: false,
        isWarmPromptFullBuy: false,
        attestationStatus: 0,
        isSoldOut: false
      }
    },
    watch: {
      colorList (val) {
        this.color = val[0]
      }
    },
    computed: {
      //  首付比例
      proportionList () {
        if (parseInt(this.goodsContent.base_price) < 25000) {
          return [
            {
              name: '10%',
              value: 0.1
            },
            {
              name: '20%',
              value: 0.2
            },
            {
              name: '30%',
              value: 0.3
            },
            {
              name: '40%',
              value: 0.4
            },
            {
              name: '50%',
              value: 0.5
            },
            {
              name: '60%',
              value: 0.6
            },
            {
              name: '70%',
              value: 0.7
            },
            {
              name: '80%',
              value: 0.8
            },
            {
              name: '90%',
              value: 0.9
            }
          ]
        } else {
          return [
            {
              name: '15%',
              value: 0.15
            },
            {
              name: '20%',
              value: 0.2
            },
            {
              name: '30%',
              value: 0.3
            },
            {
              name: '40%',
              value: 0.4
            },
            {
              name: '50%',
              value: 0.5
            },
            {
              name: '60%',
              value: 0.6
            },
            {
              name: '70%',
              value: 0.7
            },
            {
              name: '80%',
              value: 0.8
            },
            {
              name: '90%',
              value: 0.9
            }
          ]
        }
      },
      attestationTips () {
        if (this.attestationStatus === 1) {
        //          return '认证资料审核中,无法分期购买'
          return this.$t('message.dataAudit')
        } else if (this.attestationStatus === 2) {
        //          return '认证资料未通过,无法分期购买'
          return this.$t('message.dataNoPass')
        } else if (this.attestationStatus === 3) {
        //          return '认证资料未提交,无法分期购买'
          return this.$t('message.dataNoSub')
        }
      },
      defaultStages () {
        if (this.installmentNum.stages === 12) {
          return 3
        } else if (this.installmentNum.stages === 9) {
          return 2
        } else if (this.installmentNum.stages === 6) {
          return 1
        } else if (this.installmentNum.stages === 3) {
          return 0
        }
      },
      installmentList () {
        if (parseInt(this.goodsContent.base_price) > 10000) {
          return [
            {
              label: `3 ${this.$tc('message.amortization', 3)}`,
              selectionInstallment: 3
            },
            {
              label: `6 ${this.$tc('message.amortization', 3)}`,
              selectionInstallment: 6
            },
            {
              label: `9 ${this.$tc('message.amortization', 3)}`,
              selectionInstallment: 9
            },
            {
              label: `12 ${this.$tc('message.amortization', 3)}`,
              selectionInstallment: 12
            }
          ]
        } else if (parseInt(this.goodsContent.base_price) >= 5000 && parseInt(this.goodsContent.base_price) <= 10000) {
          return [
            {
              label: `3 ${this.$tc('message.amortization', 3)}`,
              selectionInstallment: 3
            },
            {
              label: `6 ${this.$tc('message.amortization', 3)}`,
              selectionInstallment: 6
            },
            {
              label: `9 ${this.$tc('message.amortization', 3)}`,
              selectionInstallment: 9
            }
          ]
        } else if (parseInt(this.goodsContent.base_price) < 5000) {
          return [
            {
              label: `3 ${this.$tc('message.amortization', 3)}`,
              selectionInstallment: 3
            },
            {
              label: `6 ${this.$tc('message.amortization', 3)}`,
              selectionInstallment: 6
            }
          ]
        }
      },
      downPayment () {
        //  if (this.installment.label === '不分期') {
        //    return this.totalPrice
        //  } else {
        return this.totalPrice * this.proportion.value
        //  }
      },
      installmentText () {
        //  if (this.installment.label === '不分期') {
        //    return this.$tc('message.amortization', 1)
        //  } else {
        //  return this.$tc('message.amortization', 0) + ' ' + this.installment.label
        return this.$tc('message.amortization', 0) + ' ' + this.installment.label
        //  }
      },
      languageType () {
        let t = window.localStorage.getItem('thaiPayMallLanguage')
        var languageType
        if (t) {
          if (t === 'cn') {
            languageType = 1
          } else if (t === 'en') {
            languageType = 3
          } else {
            languageType = 2
          }
        } else {
          languageType = 2
        }
        return languageType
      }
    },
    methods: {
      isShowTips (val) {
        if (this.inStock || this.isSoldOut) {
          this[val] = true
//          this.$refs.tipContent1.innerText = this.$t('message.stockNoBuyTips')
//          this.$refs.tipContent2.innerText = this.$t('message.stockNoBuyTips')
        }
      },
      isHideTips (val) {
        if (this.inStock || this.isSoldOut) {
          this[val] = false
        }
      },
      resetColorInfo () {
        this.resetColor = !this.resetColor
      },
      onParamChange (attr, value) {
        this[attr] = value
        this.getPrice()
      },
      //      选择商品版本信息
      onVersionChange (attr, value) {
        this[attr] = value
        let goodsVersionParams = {
          goods_id: this.goodsId,
          yjsx_id: this.version.yjsx_id,
          down_payment_percentage: this.proportion.value,
          stages: this.installment.selectionInstallment
        }
        this.$ajax.changeVersion(goodsVersionParams).then((res) => {
          if (res.code === 200) {
            // 判断商品是否下架
            if (res.data.goods_content.shelves === 1) {
              this.isSoldOut = true
            } else {
              this.isSoldOut = false
            }
            // 判断商品是否缺货
            if (res.data.goods_content.goods_count === 0) {
              this.inStock = true
            } else {
              this.inStock = false
            }
            this.installmentNum = res.data.fenqi
            this.colorList = res.data.sxzh_list
            this.goodsContent = res.data.goods_content
          } else if (res.code === 202) {
            this.$store.commit('alert', {
              switch: true
            })
          } else {
          }
        }).catch((err) => {
          this.$store.commit('alert', {
            switch: true
          })
        })
      },
  //        改变商品颜色的价格
      getPrice () {
        let goodsParams = {
          goods_id: this.goodsId,
          yjsx_id: this.version.yjsx_id,
          sxzh_id: this.color.sxzh_id,
          down_payment_percentage: this.proportion.value,
          stages: this.installment.selectionInstallment
        }
        this.$ajax.changeColor(goodsParams).then((res) => {
          if (res.code === 200) {
            this.installmentNum = res.data.fenqi
            this.goodsContent.base_price = res.data.base_price
            // 判断商品是否下架
            if (res.data.shelves === 1) {
              this.isSoldOut = true
            } else {
              this.isSoldOut = false
            }
            // 判断商品是否缺货
            if (res.data.goods_count === 0) {
              this.inStock = true
            } else {
              this.inStock = false
            }
          } else if (res.code === 202) {
            this.$store.commit('alert', {
              switch: true
            })
          } else {
          }
        }).catch((err) => {
          this.$store.commit('alert', {
            switch: true
          })
        })
      },
      // 分期购买
      installmentBuy () {
//        如果库存不足
        if (this.inStock || this.isSoldOut) {
          return
        }
//        如果没有登录
        if (!this.$store.state.loginUser.username) {
          this.showDialogType = 'login'
          return
        }
        this.$ajax.identityInfo().then((res) => { //  身份认证
          if (res.code === 200) {
            this.$ajax.getEmergency().then((res) => { // 紧急联系人验证
              if (res.code === 200) {
                this.$ajax.fullBuy({  //  判断额度是否足够
                  goods_id: this.goodsId,
                  sxzh_id: this.color.sxzh_id,
                  yjsx_id: this.version.yjsx_id,
                  type: 'fenqi',
                  down_payment_percentage: this.proportion.value,
                  stages: this.installment.selectionInstallment
                }).then((res) => {
                  if (res.code === 200) {
                    this.$router.push({
                      path: '/buy',
                      query: {
                        buyType: 'installment',
                        goodsId: this.goodsId,
                        colorId: this.color.sxzh_id,
                        versionId: this.version.yjsx_id,
                        stages: this.installment.selectionInstallment,
                        proportion: this.proportion.value
                      }
                    })
                  } else if (res.code === 202) {
                    this.showDialogType = 'quota'
                  } else if (res.code === 315) {
                    this.showDialogType = 'isLessTwoHundred'
                  }
                }).catch(err => {
                  this.$store.commit('alert', {
                    switch: true,
                    alertText: this.$t('m.websideError')
                  })
                })
              } else if (res.code === 203) {  // 紧急联系人正在审核
                this.attestationStatus = 1
                this.showDialogType = 'identity'
              } else if (res.code === 202) {  //  紧急联系人审核失败
                this.attestationStatus = 2
                this.showDialogType = 'identity'
              } else if (res.code === 201) {  //  没有紧急联系人
                this.attestationStatus = 3
                this.showDialogType = 'identity'
              }
            }).catch(err => {
              this.$store.commit('alert', {
                switch: true,
                alertText: this.$t('m.websideError')
              })
            })
          } else if (res.code === 204) {  // 用户身份状态待审核
            this.attestationStatus = 1
            this.showDialogType = 'identity'
          } else if (res.code === 206) {  // 用户身份状态认证失败
            this.attestationStatus = 2
            this.showDialogType = 'identity'
          } else if (res.code === 202) {  // 用户身份状态还没有上传资料认证
            this.attestationStatus = 3
            this.showDialogType = 'identity'
          } else if (res.code === 301) {
            this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
          } else { // 其他情况下，也给 用户身份状态认证失败 的提示吧
            this.attestationStatus = 2
            this.showDialogType = 'identity'
          }
        }).catch(err => {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('m.websideError')
          })
        })
      },
      // 全额购买
      fullBuy () {
        if (this.inStock || this.isSoldOut) {
          return
        }
        if (!this.$store.state.loginUser.username) {
          this.showDialogType = 'login'
          return
        }
        this.$router.push({
          path: '/buy',
          query: {
            buyType: 'full',
            goodsId: this.goodsId,
            colorId: this.color.sxzh_id,
            versionId: this.version.yjsx_id
          }
        })
      },
      // 关闭弹出框
      closeDialog () {
        this.showDialogType = ''
      },
      // 跳转至个人中心的身份认证页面
      toPersonalIdentity () {
        this.$router.push({ path: '/personal/identity' })
      },
      // 跳转至我的额度页面
      toPersonalQuota () {
        this.$router.push({ path: '/personal/quota' })
      }
    },
    created () {
      this.$ajax.goodsStatus(this.goodsId, String(this.languageType)).then((res) => {
        if (res.code === 200) {
          this.colorList = res.data.sxzh
          this.versionList = res.data.yjsx
          this.installmentNum = res.data.fenqi
          this.goodsContent = res.data.content
          this.slideImages = res.data.content.icon
          this.goodsContentItem = res.data
          this.gifts = res.data.gives
          this.giftsExist = res.data.gives.length !== 0 && !this.giftsExist
          this.productName = res.data.content.goods_name
          this.breadcrumb = [
            {
              name: this.$t('message.home'),
              path: '/'
            },
            {
              name: res.data.content.class_name,
              path: `/search?keyWord=${res.data.content.class_name}&id=${res.data.content.class_id}`
            },
            {
              name: this.$tc('message.detail'),
              path: `/detail/product?goodsId=${res.data.content.id}`
            }
          ]
          // 设置默认值
          this.version = this.versionList[0]
          this.color = this.colorList[0]
          this.proportion = this.proportionList[0]
          this.installment = this.installmentList[this.defaultStages]
          // 判断商品是否下架
          if (res.data.content.shelves === 1) {
            this.isSoldOut = true
          } else {
            this.isSoldOut = false
          }
          // 判断商品是否缺货
          if (res.data.content.goods_count === 0) {
            this.inStock = true
          } else {
            this.inStock = false
          }
        } else if (res.code === 202) {
          this.$store.commit('alert', {
            switch: true
          })
        } else if (res.code === 301) {
          console.log('商品id不能为空')
        } else {
        }
      }).catch((err) => {
        this.$store.commit('alert', {
          switch: true
        })
      })
      // 相关推荐
      this.$ajax.guessYouLike(this.goodsId, 'recommend').then((res) => {
        if (res.code === 200) {
          this.recommendProduct = res.data
        } else if (res.code === 202) {
        }
      })
      // 看了又看
      this.$ajax.guessYouLike(this.goodsId, 'look').then((res) => {
        if (res.code === 200) {
          this.lookProduct = res.data
        } else if (res.code === 202) {
          console.log('请求数据失败数据为空')
        }
      })
      // 猜你喜欢
      this.$ajax.guessYouLike(this.goodsId, 'like').then((res) => {
        if (res.code === 200) {
          this.products = res.data
        } else if (res.code === 202) {
          console.log('请求数据失败数据为空')
        }
      })
    },
    activated () {
      window.scrollTo(0, 0)
    }
  }
</script>

<style scoped>
  .detail {
    min-width: 1200px;
  }

  .detail-container {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 40px;
  }

  .detail-breadcrumb {
		padding-top: 24px;
	}

  .detail-buy {
    width: 1200px;
    margin-top: 24px;
  }

  .detail-buy:after {
    content: '';
    height: 0;
    line-height: 0;
    clear: both;
    display: block;
    visibility: hidden;
  }

  .detail-product-slide {
    float: left;
    margin-right: 40px;
  }

  .detail-product-buy {
    position: relative;
    width: 540px;
    float: left;
    margin-right: 24px;
  }

  .detail-product-title {
    line-height: 33px;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 32px;
  }

  .detail-product-price {
    background-color: #f2f2f2;
    height: 60px;
    overflow: hidden;
  }

  .detail-product-label {
    float: left;
    width: 94px;
    font-size: 14px;
    padding-left: 16px;
    color: #333;
  }

  .detail-product-label-price {
    line-height: 60px;
  }

  .detail-product-gifts {
    background-color: #f2f2f2;
    height: 52px;
    overflow: hidden;
  }

  .detail-product-label {
    float: left;
    width: 94px;
    font-size: 14px;
    padding-left: 16px;
    color: #333;
  }

  .detail-product-label-gifts {
    line-height: 48px;
  }

  .float-left {
    float: left;
  }

  .detail-product-totalPrice {
    height: 60px;
    line-height: 60px;
    color: #ff3535;
    font-size: 16px;
  }

  .detail-product-totalPrice span {
    font-size: 26px;
    line-height: 60px;
    font-weight: bold;
  }
  .detail-product-gifts-detail {
    height: 52px;
    line-height: 52px;
    color: #ff3535;
    font-size: 16px;
  }

  .detail-product-one-gift {
    line-height: 40px;
  }

  .detail-product-one-gift img {
    width: 30px;
    height: 30px;
  }

  .detail-product-one-gift span {
    font-size: 14px;
    color: #FF3535;
  }

  .detail-product-one-gift-margin-left {
    margin-left: 18px;
  }

  .detail-product-gifts-tips {
    font-size: 12px;
    color: #a5a5a5;
    line-height: 40px;
  }

  .detail-product-color-version {
    border-bottom: 1px solid #e6e6e6;
    margin-top: 32px;
    padding-bottom: 32px;
  }

  .detail-product-color {
    line-height: 38px;
    overflow: hidden;
  }

  .detail-product-version {
    line-height: 38px;
    margin-top: 24px;
    overflow: hidden;
  }

  .detail-product-proportion {
    line-height: 38px;
    margin-top: 32px;
  }

  .detail-product-proportion .detail-product-proportion-label {
    letter-spacing: 0;
  }

  .detail-product-installment {
    height: 38px;
    line-height: 38px;
    margin-top: 24px;
  }

  .detail-product-installment:after {
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
  }

  .detail-product-month {
    height: 20px;
    line-height: 20px;
    margin-top: 30px;
  }

  .detail-product-month:after {
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
  }

  .detail-product-monthlyPay {
    height: 20px;
    font-size: 16px;
    color: #FF3535;
  }

  .detail-product-monthlyPay span {
    font-size: 22px;
  }

  .detail-product-tip {
    padding-left: 110px;
    margin-top: 18px;
  }

  .detail-product-tip:after {
    content: '';
    width: 0;
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
  }

  .detail-product-tip-container {
    float: left;
    line-height: 17px;
    border: 1px solid #FF600A;
    font-size: 12px;
    color: #333;
    background-color: #FFFDF4;
    padding: 11px;
    position: relative;
  }

  .icon-triangle {
    position: absolute;
    top: -7px;
    left: 28px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ff600a;
  }

  .icon-triangle::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fffdf4;
    position: absolute;
    top: 1px;
    left: -6px;
  }

  .detail-product-tip-text {
    color: #ff600a;
  }

  .detail-product-btn-group {
    height: 54px;
    padding-left: 16px;
    margin-top: 60px;
    font-size: 0;
  }
  .detail-product-btn-group > div {
    display: inline-block;
    position: relative;
  }

  .detail-product-btn-group > div:first-child > .warmPrompt{
    margin-left: -12px;
  }
  .warmPrompt {
    background: white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    height: 39px;
    line-height: 39px;
    padding: 0 16px;
    border: 1px solid #E6E6E6;
    font-size: 12px;
    color: #666666;
    text-align: center;
    white-space: nowrap;
  }

  .top-triangle {
    height: 0;
    width: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid #e6e6e6;
    position: absolute;
    top: -7px;
    left: 50%;
    margin-left: -6px;
  }

  .top-triangle::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid #fff;
    position: absolute;
    top: 2px;
    left: -4px;
  }

  .detail-product-btn {
    width: 140px;
    height: 54px;
    font-size: 16px;
    cursor: pointer;
    margin-right: 24px;
  }
  .btn-center {
    margin-left: 90px;
  }

  .detail-product-recommend {
  	float: left;
  	width: 176px;
  }

  .detail-bottom {
  	margin-top: 40px;
  	width: 1200px;
  	overflow: hidden;
  }

  .detail-look {
  	float: left;
  	width: 200px;
  	margin-right: 24px;
  }

  .detail-information-guess {
  	float: left;
  	width: 976px;
  }

  .detail-information {
    width: 976px;
  }

  .detail-information-header {
    height: 56px;
    border-bottom: 2px solid #ff600a;
  }

  .detail-information-header ul {
    overflow: hidden;
  }

  .detail-information-header li {
    float: left;
    height: 56px;
    line-height: 56px;
    padding: 0 32px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
  }

  .detail-no-right {
    margin-right: 0;
  }

  .detail-information-header li.active {
    color: #fff;
    background-color: #ff600a;
  }

  .detail-information-container {
    /* margin-top: 24px; */
  }

  .detail-guess-you-like {
    margin-top: 40px;
  }

  .detail-login-container {
  	width: 400px;
  	background-color: #fff;
  	position: relative;
  }

  .detail-login-close {
  	width: 16px;
  	height: 16px;
  	background: url(../assets/images/icon_close.png) no-repeat center;
  	position: absolute;
  	top: 14px;
  	right: 14px;
  	cursor: pointer;
  }

  .detail-content {
  	width: 340px;
  	margin: 0 auto;
  }
  .detail-product-proportion:after{
    width: 0;
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .detail-product-btn-group .disabled{
    border: 1px solid #d7d7d7;
    background-color: #d7d7d7;
    color: #fff;
    /*cursor: not-allowed;*/
  }

  .detail-product-btn-group .disabled2{
    border: 1px solid #d7d7d7;
    background-color: #fff;
    font-size: 16px;
    color: #A5A5A5;
    /*cursor: not-allowed;*/
  }

  .dialog-tip {
  	width: 320px;
  	height: 131px;
  	padding: 60px 70px 40px;
  	background-color: #fff;
  }

  .dialog-title {
  	height: 25px;
  	line-height: 25px;
  	font-size: 18px;
  	text-align: center;
  }

  .dialog-btn-group {
  	height: 46px;
  	margin-top: 60px;
  	font-size: 0;
  }

  .dialog-btn {
  	width: 140px;
  	height: 46px;
  	cursor: pointer;
  }

  .margin-left {
  	margin-left: 40px;
  }
</style>
